<template>
  <div class="allOrders">
    <nav-bar :left-arrow="true" :title='title'></nav-bar>
    <van-collapse v-model="activeNames">
      <van-collapse-item>
        <template #title>
          <div>车辆订单</div>
        </template>
        <div v-for="(item, index) in carList" :key="item.carId" class="box">
          <p>车牌号: {{item.licensePlate}}</p>
          <p>车辆名称: {{item.type}}</p>
          <p>消费金额：{{carPayList[index].money}}元</p>
          <p>支付时间：{{carPayList[index].endTime}}</p>
        </div>
      </van-collapse-item>
    </van-collapse>
    <van-collapse v-model="activeNames2">
      <van-collapse-item>
        <template #title>
          <div>优惠卷订单</div>
        </template>
        <div v-for="(item) in cardList" :key="item.carId" class="box">
          <p>优惠卷名称: {{item.title}}</p>
          <p>消费金额：{{item.newMoney}}元</p>
          <p>支付时间：{{item.time}}</p>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import { mapGetters } from 'vuex'
import { getCarById } from '@/api/car'
import { getMyPay, myCoupon } from '@/api/mine'

export default {
  name: 'AllOrders',
  data () {
    return {
      title: '全部订单',
      activeNames: ['1'],
      activeNames2: ['1'],
      orderList: [],
      carPayList: [],
      carList: [],
      cardList: []
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  components: {
    NavBar
  },
  created () {
    this.getCarPay()
    this.getMineCard()
  },
  methods: {
    async getCarPay () {
      const { data: res } = await getMyPay(this.userInfo.userId)
      this.carPayList = res.data
      res.data.forEach(item => {
        const params = item.carId
        getCarById(params).then(res => {
          this.carList.push(res.data.data)
        })
      })
      this.carList = this.carList.reverse()
      this.carPayList = this.carPayList.reverse()
    },
    async getMineCard () {
      const params = {
        userId: this.userInfo.userId
      }
      const { data: res } = await myCoupon(params)
      res.data.forEach(item => {
        this.cardList.push(item)
      })
    }
  }
}
</script>

<style>
.box{
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;
}
</style>
